<template>
  <z-paging ref="paging" v-model="state.stateList" @query="getAlarmRecord">
    <view class="c-pd">
      <van-cell-group inset>
        <van-cell v-for="(item, index) in state.stateList" :key="index" use-label-slot>
          <view slot="title">{{ item.content || '-' }}</view>
          <view slot="label">
            {{ item.createDate }}
          </view>
          <view slot="right-icon">
            <van-tag type="danger" v-if="item.alarmState === 1">报警中</van-tag>
            <van-tag type="success" v-else>已处理</van-tag>
          </view>
        </van-cell>
      </van-cell-group>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import EquipRequest from '@/request/equipRequest';

interface IState {
  equipId: number;
  stateList: IAlarmRecord[];
}

const state = reactive<IState>({ equipId: 0, stateList: [] });
const paging = ref();

onLoad((options) => {
  if (!options) return;
  state.equipId = options.equipId;
});

const getAlarmRecord = (pageNo: number, pageSize: number) => {
  EquipRequest.GetAlarmRecord({ equipId: state.equipId, pageNo, pageSize, hasLoading: true })
    .then((res) => {
      paging.value!.complete(res.data.list);
    })
    .catch(() => {
      paging.value!.complete(false);
    });
};
</script>
